<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>upfile</title>
	<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
	<!-- <link rel="stylesheet" type="text/css" href="../css/default.css"> -->
	<link rel="stylesheet" type="text/css" href="http://www.bootcss.com/p/buttons/css/buttons.css">
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">
					<img alt="文件上传" src="">
				</a>
			</div>
		</div>
	</nav>
	<nav class="navbar" style="margin-bottom: 50px ;">
		<div class="col-sm-4 col-sm-offset-3">
			<div class="form-group">
				<label for="exampleInputFile">File input</label>
				<input type="file" accept="image/*" id="file" name='file'>
				<p class="help-block">choice file for you system</p>
			</div>
			<div class="progress">
				<div id="jin" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition: 0.2s ;">
					<span class="sr-only">20% Complete (danger)</span>
				</div>
			</div>
			<button type="submit" style="margin: 0px auto 20px auto;display: block ;" class="button button-glow button-rounded button-raised button-primary">Submit</button>
		</div>
		<div class="col-sm-2" style="">
			<div>
				<a href="#" class="thumbnail" style="margin-bottom: 0px;width: 100%;height: auto ;">
					<img id="showUpHead" src="../img/defaultHead.png" alt="...">
				</a>
			</div>
		</div>
	</nav>
	<!-- <nav class="navbar navbar-default"> -->
	<div id="upVideo" style="display: none;width: 100%;height: auto ;">
		<div class="col-sm-2 col-sm-offset-5" >
			<a href="/newup/video" class="button button-glow button-rounded button-raised button-primary" style="margin: 0px auto;display: block ;">开始上传视频</a>
		</div>
	</div>
		
	<!-- </nav> -->
</body>
<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
<script type="text/javascript">

	function submit(){
		var fileObj = document.getElementById('file').files[0];
		var formData = new FormData()
		formData.append("file", fileObj)
		formData.append("fileId", 1)
		var xhr = new XMLHttpRequest()
		xhr.open("post", '<%-action%>', true);
		jin()
		xhr.onload = function () {
			bar.css({'width':'100%'})
		    clearInterval(time)
		    successBackImg()
		};
		xhr.send(formData);
		
	}

	$('button').click(function(){
		var fileName = $('input').val()
		var str = fileName.match(/\.jpg|\.png|\.mp4|\.gif/)
		if (str != null && str != '') {
			submit()
		} else {
			alert('文件格式不支持')
		}
	})
	
	function jin(){
		bar = $('#jin')
		time = setInterval(function(){
			$.get("<%-action%>/ajax",function(result){
				if (result == 100) {
					return;
				} else {
					bar.css({'width':result+'%'})
				}
			})
		},500)
	}

	function successBackImg(){
		$.get("<%-action%>/img",function(result){
			$('#showUpHead').attr({'src':'../'+result})
		})
		$('#upVideo').css({'display':'block'})
	}
</script>
</html>